<template>
    <div>
         <el-table 
    :data="tableData"
    v-show="isVisible"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="下单日期"
      width="240vh">
    </el-table-column>
    <el-table-column
      prop="names"
      label="订单信息"
      width="240vh">
    </el-table-column>
    <el-table-column
      prop="prices"
      label="消费金额(RMB)"
      width="240vh">
    </el-table-column>
    <el-table-column
    fixed="right"
      label="操作"
      width="">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">删除记录</el-button>
      </template>
    </el-table-column>
  </el-table></div>
  
</template>
<style>
</style>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            userId:0,
            tableData: [],
            isVisible:true
        }

    },
    methods:{
        handleClick:function(row) {
        console.log('Button clicked, row data:',row.id);
        axios.get("http://localhost:8080/delRecordById/"+row.id).then((res)=>{
            console.log(res.data)
        }).catch(()=>{
            console.log("error")
        }).finally(()=>{
             axios.get("http://localhost:8080/getRecordById/"+this.userId).then((res)=>{
            console.log(res.data.data)
            if (res.data.data.length === 0)
            {
                this.isVisible=false,
                this.$message('你还没有购买喔~');
            }
            else{
                // 返回的数据传递给tableData
            this.tableData=res.data.data
            this.isVisible=true
            }
            
        })
            
        })
      }
    },
    mounted(){
        this.userId=this.$route.query.loginUserId,
        axios.get("http://localhost:8080/getRecordById/"+this.userId).then((res)=>{
            console.log(res.data.data)
            if (res.data.data.length === 0)
            {
                this.isVisible=false,
                this.$message('你还没有购买喔~');
            }
            else{
                // 返回的数据传递给tableData
            this.tableData=res.data.data
            this.isVisible=true
            }
            
        })
    }
}
</script>